<template>
  <div>
    <h1>订单历史记录</h1>
    <el-form :inline="true">
      <el-form-item>
        <el-select v-model="type" placeholder="请选择">
          <el-option label="书名" value="name"></el-option>
          <el-option label="作者" value="author"></el-option>
          <el-option label="出版社" value="house"></el-option>
          <el-option label="订单时间" value="time"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="type === 'time'">
        <el-date-picker
          v-model="daterange"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions2">
        </el-date-picker>
      </el-form-item>
      <el-form-item v-else>
        <el-input v-model="keyword"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" @click="handleSearch"></el-button>
      </el-form-item>

    </el-form>
    <order-item v-for="order of orders" :info="order.info" :cartlst="order.cartlst" :key="order.id"></order-item>

  </div>
</template>

<script>
import OrderItem from '@/components/components/OrderUtils/OrderItem'
import { CustomGetOrders, AdminGetOrders } from '@/utils/request'

export default {

  components: {
    'order-item': OrderItem
  },
  props: ['role'],
  data () {
    return {
      orders: [],
      bk: [],
      type: 'name',
      daterange: [],
      keyword: '',
      pickerOptions2: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  methods: {
    handleSearch () {
      if (this.type === 'time') {
        this.SearchTime(this.daterange[0], this.daterange[1])
      } else if (this.keyword) {
        this.SearchField(this.type, this.keyword)
      } else {
        this.orders = Object.assign([], this.bk)
      }
    },
    SearchTime (a, b) {
      this.orders = this.bk.filter(item => {
        let d = new Date(item.info.time)
        return d >= a && d <= b
      })
    },
    SearchField (field, keyword) {
      this.orders = this.bk.filter(item => {
        for (let book of item.cartlst) {
          if (book[field].search(keyword) > -1) {
            return true
          }
        }
        return false
      })
    },
    ResponseHandler (rsp) {
      this.orders = rsp.data
      this.orders.sort((a, b) => {
        let A = new Date(a.info.time)
        let B = new Date(b.info.time)
        return A - B
      })
      this.bk = Object.assign([], rsp.data)
      console.log(this.orders)
    }
  },
  created () {
    if (this.role === 'admin') {
      AdminGetOrders().then(this.ResponseHandler)
    } else {
      CustomGetOrders().then(this.ResponseHandler)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-select {
  width: 10em;
}
</style>
